<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表板测试</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto p-6">
        <h1 class="text-2xl font-bold mb-6">仪表板功能测试</h1>
        
        <!-- 测试结果 -->
        <div id="testResults" class="mb-6"></div>
        
        <!-- 测试按钮 -->
        <div class="space-x-4 mb-6">
            <button onclick="testLogin()" class="bg-blue-500 text-white px-4 py-2 rounded">测试登录</button>
            <button onclick="testDashboard()" class="bg-green-500 text-white px-4 py-2 rounded">测试仪表板</button>
            <button onclick="testSystemMetrics()" class="bg-purple-500 text-white px-4 py-2 rounded">测试系统监控</button>
            <button onclick="testTasks()" class="bg-orange-500 text-white px-4 py-2 rounded">测试任务列表</button>
        </div>
        
        <!-- 登录表单 -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h2 class="text-xl font-bold mb-4">快速登录</h2>
            <div class="flex space-x-4">
                <input type="text" id="username" placeholder="用户名" value="admin" class="border px-3 py-2 rounded">
                <input type="password" id="password" placeholder="密码" value="admin123" class="border px-3 py-2 rounded">
                <button onclick="quickLogin()" class="bg-blue-500 text-white px-4 py-2 rounded">登录</button>
            </div>
            <div id="tokenDisplay" class="mt-4 text-sm text-gray-600"></div>
        </div>
        
        <!-- 跳转链接 -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h2 class="text-xl font-bold mb-4">快速访问</h2>
            <div class="space-y-2">
                <a href="http://localhost:8000/web" target="_blank" class="block text-blue-500 hover:underline">Web登录页面</a>
                <a id="dashboardLink" href="#" target="_blank" class="block text-blue-500 hover:underline">仪表板页面</a>
            </div>
        </div>
    </div>

    <script>
        let currentToken = null;
        
        function addResult(message, type = 'info') {
            const resultsDiv = document.getElementById('testResults');
            const resultDiv = document.createElement('div');
            const colors = {
                'success': 'bg-green-100 text-green-800',
                'error': 'bg-red-100 text-red-800',
                'info': 'bg-blue-100 text-blue-800',
                'warning': 'bg-yellow-100 text-yellow-800'
            };
            
            resultDiv.className = `p-3 rounded mb-2 ${colors[type]}`;
            resultDiv.textContent = message;
            resultsDiv.appendChild(resultDiv);
        }
        
        async function testLogin() {
            addResult('🔐 测试登录...', 'info');
            try {
                const response = await fetch('http://localhost:8000/api/v1/auth/login', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({username: 'admin', password: 'admin123'})
                });
                
                if (response.ok) {
                    const data = await response.json();
                    currentToken = data.access_token;
                    addResult(`✅ 登录成功: ${data.user.username}`, 'success');
                    updateDashboardLink();
                } else {
                    addResult(`❌ 登录失败: ${response.status}`, 'error');
                }
            } catch (error) {
                addResult(`❌ 登录异常: ${error.message}`, 'error');
            }
        }
        
        async function testDashboard() {
            if (!currentToken) {
                addResult('❌ 请先登录', 'error');
                return;
            }
            
            addResult('📊 测试仪表板...', 'info');
            try {
                const response = await fetch(`http://localhost:8000/web/dashboard?token=${currentToken}`);
                if (response.ok) {
                    const content = await response.text();
                    
                    // 检查关键组件
                    const checks = [
                        {name: '今日解析', keyword: '今日解析'},
                        {name: '进行中任务', keyword: '进行中任务'},
                        {name: '系统状态', keyword: '系统状态'},
                        {name: 'Chart.js', keyword: 'Chart.js'},
                        {name: 'weekStats', keyword: 'weekStats'},
                    ];
                    
                    checks.forEach(check => {
                        if (content.includes(check.keyword)) {
                            addResult(`✅ ${check.name}正常`, 'success');
                        } else {
                            addResult(`❌ ${check.name}缺失`, 'error');
                        }
                    });
                    
                    addResult(`✅ 仪表板页面加载成功`, 'success');
                } else {
                    addResult(`❌ 仪表板页面失败: ${response.status}`, 'error');
                }
            } catch (error) {
                addResult(`❌ 仪表板异常: ${error.message}`, 'error');
            }
        }
        
        async function testSystemMetrics() {
            if (!currentToken) {
                addResult('❌ 请先登录', 'error');
                return;
            }
            
            addResult('📈 测试系统监控...', 'info');
            try {
                const response = await fetch('http://localhost:8000/api/v1/system/metrics/simple', {
                    headers: {'Authorization': `Bearer ${currentToken}`}
                });
                
                if (response.ok) {
                    const data = await response.json();
                    addResult(`✅ 系统监控正常: CPU=${data.cpu}%, 内存=${data.memory}%, 状态=${data.status}`, 'success');
                } else {
                    addResult(`❌ 系统监控失败: ${response.status}`, 'error');
                }
            } catch (error) {
                addResult(`❌ 系统监控异常: ${error.message}`, 'error');
            }
        }
        
        async function testTasks() {
            if (!currentToken) {
                addResult('❌ 请先登录', 'error');
                return;
            }
            
            addResult('📋 测试任务列表...', 'info');
            try {
                const response = await fetch('http://localhost:8000/api/v1/tasks/my-tasks?page_size=5', {
                    headers: {'Authorization': `Bearer ${currentToken}`}
                });
                
                if (response.ok) {
                    const data = await response.json();
                    addResult(`✅ 任务列表正常: 共${data.total}个任务`, 'success');
                } else {
                    addResult(`❌ 任务列表失败: ${response.status}`, 'error');
                }
            } catch (error) {
                addResult(`❌ 任务列表异常: ${error.message}`, 'error');
            }
        }
        
        async function quickLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            
            try {
                const response = await fetch('http://localhost:8000/api/v1/auth/login', {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({username, password})
                });
                
                if (response.ok) {
                    const data = await response.json();
                    currentToken = data.access_token;
                    document.getElementById('tokenDisplay').textContent = `Token: ${currentToken.substring(0, 50)}...`;
                    updateDashboardLink();
                    addResult('✅ 快速登录成功', 'success');
                } else {
                    addResult('❌ 登录失败', 'error');
                }
            } catch (error) {
                addResult(`❌ 登录异常: ${error.message}`, 'error');
            }
        }
        
        function updateDashboardLink() {
            if (currentToken) {
                const link = document.getElementById('dashboardLink');
                link.href = `http://localhost:8000/web/dashboard?token=${currentToken}`;
                link.style.display = 'block';
            }
        }
        
        // 页面加载时自动测试
        window.onload = function() {
            addResult('🚀 仪表板测试页面已加载', 'info');
            addResult('💡 点击上方按钮开始测试', 'info');
        };
    </script>
</body>
</html>